var bodyBg = ['#F7E8ED', '#F2D9E6', '#ECC6DE', '#E0ECF5', '#DDF4DE', '#F0F1D5', '#EEDECD', '#B8E6B3', '#ABE3D8', '#E0E1F5', '#F7E8ED', '#F2D9E6', '#E0ECF5', '#DDF4DE', '#F0F1D5', '#EEDECD', '#B8E6B3', '#ABE3D8', '#DFD1F0', '#6161616'];
var boxBg = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722', '#795548', '#564545', '#607d8b', '#405d6b', '#9e9e9e', '#70737d', '#389fa0', '#38a05e', '#b3c981', '#76a803', '#fecf43', '#e2785f'];
(function () {
    // 入口函数
    var init = function () {
        bgStyle();
        // 添加事件
        initEvent();
    }

    // 添加事件
    var initEvent = function () {
        document.querySelectorAll('.box').forEach(function (node) {
            // box滑动事件  以<div>1</div>参照
            node.children[0].addEventListener('mouseenter', onMouseenter);
            node.addEventListener('mouseleave', onMouseleave);
        })
        // content容器晃动
        document.addEventListener('mousemove', onDocumentmove);
    }
    // content容器晃动
    var onDocumentmove = function (e) {
        // 保持一个document文档的中心点   
        // 想办法中心点为0  类似xy平面坐标轴
        var x = (e.clientX / window.innerWidth - 0.5) * 15;
        var y = (0.5-e.clientY / window.innerHeight) * 15;
        document.querySelector('.content').style.transform = `rotateX(${y}deg) rotateY(${x}deg)`;
    }
    // 鼠标滑入事件  判断鼠标滑入方向
    var onMouseenter = function (e) {
        // console.log(this.getBoundingClientRect());
        var top = this.getBoundingClientRect().top;//元素上边距离文档上边的距离
        var right = this.getBoundingClientRect().right;
        var bottom = this.getBoundingClientRect().bottom;
        var left = this.getBoundingClientRect().left;
        // 为方便观察用Math.abs()
        var t = Math.abs(e.clientY - top);
        var r = Math.abs(e.clientX - right);
        var b = Math.abs(e.clientX - bottom);
        var l = Math.abs(e.clientY - left);
        var minNum = Math.min(t, r, b, l);
        // console.log(minNum)
        switch (minNum) {
            case (t):
                this.parentNode.style.transform = 'translateZ(100px) rotateX(-180deg)'
                break;
            case (r):
                this.parentNode.style.transform = 'translateZ(100px) rotateY(-180deg)'
                break;
            case (b):
                this.parentNode.style.transform = 'translateZ(100px) rotateX(180deg)'
                break;
            case (l):
                this.parentNode.style.transform = 'translateZ(100px) rotateY(180deg)'
                break;
        }
        document.body.style.background = bodyBg[Math.round(Math.random() * bodyBg.length)];
        // Math.round()四舍五入取整
        // Math.floor()向下取整也可以
    }

    // 鼠标移出事件
    var onMouseleave = function () {
        // console.log('leave')
        this.style.transform = '';

    }

    // 动态添加css背景图片
    var bgStyle = function () {
        var style = document.createElement('style');
        var str = '';
        boxBg.forEach(function (node, index) {
            // console.log(node,index)
            str += `.box:nth-of-type(${index+1}) div{
                background: ${node} url(./img/${index+1}.png) no-repeat center center
            }`
        })
        style.innerHTML = str;
        document.head.appendChild(style);
    }


    init();
})()
